<template>
    <div>
        <m-filter placeholder="请输入用户名称" search-key="" @search="contentSearch">
            <template slot="search-form">
                <a-form-model layout="inline" class="index-search-form-model">
                    <a-form-model-item>
                        <el-date-picker
                            @change="searchTable"
                            value-format="yyyy"
                            size="small"
                            v-model="searchParams.applyYear"
                            type="year"
                            placeholder="试点年度"
                        ></el-date-picker>
                    </a-form-model-item>

                    <a-form-model-item>
                        <a-select
                            placeholder="创建状态"
                            v-model="searchParams.cjzt"
                            allowClear
                            @change="searchTable"
                            showSearch
                            optionFilterProp="title"
                        >
                            <a-select-option
                                v-for="(item, index) in applyStateList"
                                :key="index"
                                :value="item.code"
                                :title="item.name"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item v-if="false">
                        <a-select
                            placeholder="授牌状态"
                            v-model="searchParams.cjzt"
                            allowClear
                            @change="searchTable"
                            showSearch
                            optionFilterProp="title"
                        >
                            <a-select-option
                                v-for="(item, index) in applyStateList"
                                :key="index"
                                :value="item.code"
                                :title="item.name"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button class="ml20" icon="redo" type="primary" @click="reset">重置</a-button>
                    </a-form-model-item>
                </a-form-model>
            </template>
        </m-filter>
        <div class="table">
            <a-table
                rowKey="id"
                :columns="columns"
                :data-source="tableData"
                :loading="tableLoading"
                :pagination="pagination"
                :scroll="{ y: true }"
                @change="handleTableChange"
            >
                <template slot="operate" slot-scope="text, record">
                    <template v-if="$store.state.userInfo.roleCode === 2">
                        <template>
                            <span class="primary-color" @click="openModal(record, record.cjzt === 2)">
                                {{ record.cjzt === 2 ? '审核' : '查看' }}
                            </span>
                        </template>
                    </template>
                    <template v-if="$store.state.userInfo.roleCode > 2">
                        <template>
                            <span class="primary-color" @click="openModal(record, record.cjzt === 5)">
                                {{ record.cjzt === 5 ? '审核' : '查看' }}
                            </span>
                        </template>

                        <template v-if="record.cjzt === 8">
                            <a-divider type="vertical" />
                            <a-popconfirm
                                title="请确认是否授牌"
                                ok-text="是"
                                cancel-text="否"
                                @confirm="shouPai(record)"
                            >
                                <span class="primary-color">
                                    {{ '授牌' }}
                                </span>
                            </a-popconfirm>
                            <a-divider type="vertical" />

                            <span class="primary-color" @click="zzspPai(record)">
                                {{ '终止授牌' }}
                            </span>
                        </template>
                        <template v-if="record.cjzt === 9">
                            <a-divider type="vertical" />

                            <span @click="chePai(record)" class="primary-color">
                                {{ '撤牌' }}
                            </span>
                        </template>
                    </template>
                    <template v-if="[3, 4, 6, 7].includes(record.cjzt)">
                        <a-divider type="vertical" />
                        <span class="primary-color" @click="openStopModal(record)">原因</span>
                    </template>
                    <template v-if="record.cjzt === 10">
                        <a-divider type="vertical" />

                        <span @click="showRevokeReason(record)" class="primary-color">
                            {{ '原因' }}
                        </span>
                    </template>
                </template>
            </a-table>
        </div>
        <stop-reason v-if="showStopModal" :showStopModal="showStopModal" @close="closeStopModal" :record="currentRow" />
        <revoke-reason
            v-if="showCpModal"
            :showCpModal="showCpModal"
            :isEdit="cpModalEdit"
            @close="closeCpModal"
            :record="currentRow"
            :type="zzOrCp"
        />
        <!--        <zzsp-reason-->
        <!--            v-if="showZzspModal"-->
        <!--            :showCpModal="showZzspModal"-->
        <!--            :isEdit="zzspModalEdit"-->
        <!--            :type="zzOrCp"-->
        <!--            @close="closeZzspModal"-->
        <!--            :record="currentRow"-->
        <!--        />-->
    </div>
</template>

<script>
import { PAGINATION } from '../../../common/config'
import { applyApi, getCheckTableList, checkApi } from '../../../common/api/applyManage'
import { areaMixin } from '../../../common/mixin'
import { constant } from '@/common/config'
import { selfEvaluationApi } from '../../../common/api/selfEvaluation'
import { baseInfoDetail } from '../../../common/api/setting'
import StopReason from '@/views/applyManage/StopReason'
import RevokeReason from '@/views/applyManage/RevokeReason'
// import ZzspReason from '@/views/applyManage/ZzspReason'
const { ENTERPRISE } = constant
const searchParams = {
    applyYear: undefined,
    cjzt: undefined,
    state: undefined,
}
export default {
    name: 'userManage',
    components: { StopReason, RevokeReason },
    data() {
        return {
            zzOrCp: null,
            // zzspModalEdit: true,
            // showZzspModal: false,
            cpModalEdit: true,
            showStopModal: false,
            showCpModal: false,
            isShowModal: false,
            currSelectedTreeNode: [],
            // search
            roleList: [],
            searchParams: { ...searchParams },
            // table
            pagination: PAGINATION(),
            tableData: [],
            tableLoading: false,
            currentRow: {},
            applyNeedData: {
                baseInfoDetail: {},
                selfEvaluationList: [],
            },
            isEdit: true,
        }
    },
    computed: {
        applyStateList() {
            return this.$store.state.applyState
        },
        columns() {
            const applyState = {}
            this.$store.state.applyState.forEach(item => {
                applyState[item.code] = item.name
            })
            return [
                {
                    title: '城市名称',
                    dataIndex: 'cityName',
                },
                {
                    title: '试点年度',
                    dataIndex: 'applyYear',
                },
                {
                    title: '行政级别',
                    dataIndex: 'xzjbName',
                },
                {
                    title: '行政隶属',
                    dataIndex: 'xzlsName',
                },
                {
                    title: '创建工作主要负责人',
                    dataIndex: 'cjgzzyfzr',
                },
                {
                    title: '安办机构主要负责人',
                    dataIndex: 'abzyfzr',
                },
                {
                    title: '日常工作联系人',
                    dataIndex: 'rcgzlxr',
                },
                {
                    title: '创建状态',
                    dataIndex: 'cjzt',
                    customRender: (text, record) => {
                        return applyState[text]
                    },
                },
                {
                    title: '操作',
                    dataIndex: 'operate',
                    scopedSlots: { customRender: 'operate' },
                    width: 250,
                },
            ]
        },
    },
    watch: {},
    mounted() {
        this.getTableData()
    },
    methods: {
        closeStopModal(type) {
            this.showStopModal = false
            if (type === 'reset') {
                this.reset()
            }
        },
        closeCpModal() {
            this.showCpModal = false
            this.reset()
        },
        // closeZzspModal() {
        //     this.showZzspModal = false
        //     this.reset()
        // },
        chePai(record) {
            this.showCpModal = true
            this.currentRow = record
            this.zzOrCp = 'cp'
        },
        zzspPai(record) {
            // this.showZzspModal = true
            // this.currentRow = record
            this.showCpModal = true
            this.currentRow = record
            this.zzOrCp = 'zz'
        },
        showRevokeReason(record) {
            this.showCpModal = true
            this.currentRow = record
            this.cpModalEdit = false
        },
        async shouPai(record) {
            this.$loading({ fullscreen: true })
            try {
                let res = await checkApi.sp({ id: record.id })

                if (res.code == 200) {
                    this.$message.success(res.message)
                }
            } catch (e) {
                console.log(e)
            }
            this.reset()
            this.$loading().close()
        },
        openStopModal(record) {
            this.showStopModal = true
            this.currentRow = record
        },
        handleTableChange(pagination) {
            this.pagination.current = pagination.current
            this.pagination.pageSize = pagination.pageSize
            this.getTableData()
        },
        async openModal(record, isEdit) {
            this.$loading({ fullscreen: true })
            this.isEdit = isEdit
            try {
                let res = await applyApi.detail({ id: record.id, state: 1 })
                if (res.code == 200) {
                    this.applyNeedData.record = res.data
                    this.applyNeedData.record.xzjbName = record.xzjbName
                    this.$emit('tabChange', 'create', this.applyNeedData, this.isEdit)
                }
            } catch (e) {
                console.log(e)
            }
            this.$loading().close()
        },
        del(id) {
            // usersApi.del({ id }).then(() => {
            //     this.$message.success('删除成功')
            //     this.pagination.current = getFinalPageNum(
            //         this.pagination.total,
            //         this.pagination.current,
            //         this.pagination.pageSize,
            //         1,
            //     )
            //     this.getTableData()
            // })
        },
        reset() {
            this.searchParams = { ...searchParams }
            this.searchTable()
        },
        contentSearch(value) {
            Object.assign(this.searchParams, value)
            this.searchTable()
        },
        searchTable() {
            clearTimeout(this._inputSearchTimer)
            this._inputSearchTimer = setTimeout(() => {
                this.pagination.current = 1
                this.getTableData()
            }, 600)
        },
        getTableData() {
            const { current: pageNum, pageSize } = this.pagination
            const { applyYear, cjzt } = this.searchParams
            this.tableLoading = true
            getCheckTableList({
                pageSize,
                pageNum,
                applyYear,
                cjzt,
            }).then(res => {
                if (res.code == 200) {
                    res = res.data
                    this.tableData = res.list
                    this.tableLoading = false
                    this.pagination.total = res.rowCount
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.index-search-form-model .ant-form-item {
    margin-bottom: 0 !important;
}
</style>
